<template>
    <div :class='$style.top'>
        <BLocale />
    </div>
    <div :class='$style.page'>
        <div :class='$style.container'>
            <div :class='$style.loginText'>{{$t('login')}}</div>
            <div :class='$style.modal'>
                <div :class='[$style.errorTips, {[$style.show] : error.show}]'>
                    <a-alert :closable='false' :message='error.msg' type='error' show-icon />
                </div>
                <a-form :model='formData' layout='vertical'>
                    <a-form-item v-if="!isPlatform" :label='$c("company", "name")'>
                        <a-input type='text' size='large' v-model:value='formData.tenant' @focus='focus("tenant")' @keyup.enter="login" />
                    </a-form-item>
                    <a-form-item :label='$t("account")'>
                        <a-input type='text' size='large' v-model:value='formData.account' @focus='focus("account")' @keyup.enter="login" />
                    </a-form-item>
                    <a-form-item :label='$t("password")'>
                        <a-input type='password' size='large' v-model:value='formData.password' @focus='focus("password")' @keyup.enter="login" />
                    </a-form-item>
                    <a-form-item>
                        <a-button size='large' type="primary" block :loading='loading' @click='login'>{{$t('login')}}</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
    </div>

</template>

<script lang='ts' setup>
    import { reactive, ref } from "vue"
    import { loginApi } from '@/api/Login'
    import { useAuthStore, useLangStore } from '@/store'
    import { useI18nStore } from '@/store/i18n'
    import { useRoute, useRouter } from "vue-router"

    const route = useRoute()
    const isPlatform = ref(route.name == 'loginPlatform')
    

    console.log(route.name)

    const prevTenantKey = 'prevTenant'
    const prevAccountKey = 'prevAccount'

    let prevTenant = localStorage.getItem(prevTenantKey)
    let prevAccount = localStorage.getItem(prevAccountKey)

    const router = useRouter()

    const auth = useAuthStore()

    const i18n = useI18nStore()

    const error = reactive({
        msg : '',
        key : '',
        show : false
    })

    const loading = ref(false)

    const formData = ref({
        tenant : prevTenant ? prevTenant : '',
        account : prevAccount ? prevAccount : '',
        password : '',
    })
    

    function focus(key:string) {
        if(error.key == '' || key == error.key) {
            error.show = false
            error.key = ''
        }
    }



    async function login() {
        if(!isPlatform.value) {
            if(formData.value.tenant === '') {
            error.msg = i18n.concat('please', 'input', 'company', 'name')
            error.key = 'tenant'
            error.show = true
            return
        }
        }
        if(formData.value.account === '') {
            error.msg = i18n.concat('please', 'input', 'account')
            error.key = 'account'
            error.show = true
            return
        }
        if(formData.value.password === '') {
            error.msg = i18n.concat('please', 'input', 'password')
            error.key = 'password'
            error.show = true
            return
        }


        error.show = false

        loading.value = true

        const params:any = {
            ...formData.value
        }
        if(isPlatform.value) {
            delete params.tenant
        }

        const res = await loginApi(params)
        loading.value = false
        if(res.success) {
            localStorage.setItem(prevTenantKey, formData.value.tenant)
            localStorage.setItem(prevAccountKey, formData.value.account)
            auth.setUserInfo({
                name : res.data.name,
                super : res.data.super,
                belong : res.data.belong
            })
            auth.setAuth(true)
            auth.setToken(res.data.accessToken, res.data.expire)
            router.replace('/')

        }else {
            error.msg = res.msg
            error.show = true
        }
        
    }
</script>

<style module lang='scss'>
    .top{
        width: 1200px;
        max-width: 100%;
        position: absolute;
        top: 25px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: right;
    }

    .page{
        height: 100vh;
        width: 100vw;
    }

    .container{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        .loginText{
            text-align: center;
            font-size: 18px;
        }
        
        .modal {
            width: 500px;
            box-shadow: 0 0 12px 1px #e8e8e8;
            margin-top: 30px;
            padding: 30px 30px;

            @media screen and (max-width:500px) {
                width: 300px;
            }
        }
    }

    .errorTips {
        margin-bottom: 15px;
        display: none;

        &.show{
            display: block;
        }
    }
</style>